@import './panel-var.scss';
@import './panel-mixin.scss';

$color: #666361;
$color2: #3f3c3e;

.ant-switch {
  background-color: #364241b3;

  &:after {
    background-color: #668d93;
  }
  &:focus {
    box-shadow: 0 0 2px 2px #24e0f196;
  }
}

.ant-switch-checked {
  background-color: rgba(68, 203, 215, 0.7);

  &:after {
    background-color: #c1fffb;
  }
}

.ant-select {
  color: $text-active-color;
  font-size: $fz-ssm;

  .ant-select-selection {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid $line-color;
    border-radius: 0;
    box-shadow: none;
    &:focus, &:active {
      border-radius: 2px;
      box-shadow: 0 0 2px 2px #24e0f196;
    }
  }

  .ant-select-arrow {
    color: $text-active-color;
  }
}
.ant-select-open {
  box-shadow: none;
}

.ant-select-dropdown {
  position: relative;
  background-color: #1e1e1e;
  border-radius: 0;
  font-size: $fz-ssm;
  z-index: 100000;
}

.ant-select-dropdown-menu-item:first-child {
  border-radius: 0;
}

.ant-select-dropdown-menu-item:last-child {
  border-radius: 0;
}

.ant-select-dropdown-menu-item {
  color: $text-color;
  font-family: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
  Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif';
}

.ant-select-dropdown-menu-item:hover {
  background-color: #668d931a;
  color: $text-color;
}

.ant-select-dropdown-menu-item-selected,
.ant-select-dropdown-menu-item-selected:hover {
  background-color: #668d9333;
  color: $text-active-color;
}

.ant-select-dropdown-menu-item-active {
  background-color: #668d9333;
}

.ant-spin-blur {
  opacity: .1;
}

.ant-spin-dot i {
  background-color: #44cbd8;
}

// tab reset style
.ant-tabs {
  flex: 1;
}

.ant-tabs-bar {
  color: $text-color;
  border-color: $line-color;
  margin: 0 20px;
}

.ant-tabs-nav-scroll {
  text-align: left;
}

.ant-tabs-nav .ant-tabs-tab-active {
  color: $text-active-color;
}

.ant-tabs-ink-bar {
  background-color: $text-active-color;
}

.ant-tabs-nav .ant-tabs-tab {
  margin-right: 20px;
}

.ant-tabs .ant-tabs-small-bar .ant-tabs-tab {
  padding: 8px 0;
}

.ant-tabs-nav .ant-tabs-tab:hover {
  color: $text-active-color;
}

.ant-tabs-content {
  // overflow-y: auto;
  height: calc(100% - 36px);
}

.ant-tabs-tabpane {
  height: 100%;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    height: 56px;
    background-color: hsla(0, 0%, 53%, .4);
  }
}

.ant-tabs-nav .ant-tabs-tab-disabled, .ant-tabs-nav .ant-tabs-tab-disabled:hover {
  color: gray;
}

.ant-tabs-tab-prev, .ant-tabs-tab-next {
  color: $text-color;
}

.ant-tabs-tab-prev:hover, .ant-tabs-tab-next:hover {
  color:$text-active-color;
}

.ant-tabs-tab-btn-disabled, .ant-tabs-tab-btn-disabled:hover {
  color: gray;
}
// reset ant-slider
$hovercolor: #96fdf6;;
.ant-slider {
  margin-top: 10px;

  &:hover {
    .ant-slider-rail {
      background-color: #cafff766;
      height: 2px;
    }

    .ant-slider-track {
      background-color: $hovercolor;
      height: 2px;
    }

    .ant-slider-handle {
      border-color: $hovercolor;
      background-color: $hovercolor;
      margin-left: -4px;
      margin-top: -3px;
      width: 8px;
      height: 8px;
    }

    .ant-slider-handle:not(.ant-tooltip-open) {
      border-color: $hovercolor;
    }
  }

  .ant-slider-rail {
    background-color: $line-color;
    height: 2px;
  }

  .ant-slider-track {
    background-color: $text-color;
    height: 2px;
  }

  .ant-slider-handle {
    border-color: $text-color;
    background-color: $text-color;
    margin-left: -4px;
    margin-top: -3px;
    width: 8px;
    height: 8px;
    &:focus {
      box-shadow: 0 0 0 5px #c1fffb33;
    }
  }
}


// input-small
.ant-input {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid $line-color;
  border-radius: 0;
  box-shadow: none;
  color: #44cbd7;
  &:focus, &:active, &:hover {
    border-radius: 2px;
    box-shadow: none;
    border-color: $line-color;
  }
}


.ant-radio-wrapper {
  color: #c1fffb;
  font-size: 12px;
}
.ant-radio-wrapper-checked {
  color: #44cbd7;
}

.ant-radio-inner {
  width: 14px;
  height: 14px;
  background-color: #668d93;
  border-color: #668d93;
  
}
.ant-radio-inner::after {
  left: 2px;
  top: 2px;
  background-color: #c1fffb;
}
.ant-radio-checked .ant-radio-inner {
  border-color: rgba(68, 203, 215, 0.7);
  background-color: rgba(68, 203, 215, 0.7);
}

.ant-radio-wrapper:hover .ant-radio, .ant-radio:hover .ant-radio-inner, .ant-radio-input:focus + .ant-radio-inner {
  border-color: rgba(68, 203, 215, 0)
}